<template>
  <view class="container">
    <view class="header">
      
      <view class="description">签到规则说明</view>
    </view>
    <view class="sign-in-info">
      <text>已连续签到</text>
      <text class="days">{{ consecutiveDays }} 天</text>
    </view>



    <view class="sign-button-container">
      <button class="sign-button" @click="signIn">签到</button>
    </view>

    <view class="extra-info">
      连续签到7天可额外获得50积分
    </view>

    <view class="task-list">
      <view class="task-item" v-for="(task, index) in tasks" :key="index">
        <view class="task-name">{{ task.name }}</view>
        <view class="task-points">+{{ task.points }}</view>
        <button class="task-button">去完成</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      consecutiveDays: 3,
      tasks: [
        { name: '邀请好友', points: 5 },
        { name: '关注公众号', points: 10 },
      ],
    };
  },
  methods: {
    signIn() {
      if (this.consecutiveDays < 7) {
        this.consecutiveDays += 1;
      }
      // 在这里可以添加请求后台接口的逻辑，记录签到信息
    }
  }
};
</script>

<style>
.container {
  padding: 16px;
}

.header {
  position: relative;
  text-align: right;
  padding: 10px;
}

.banner {
  width: 100%;
  height: auto;
}

.description {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  color: #666;
}

.sign-in-info {
  font-size: 18px;
  text-align: center;
  margin: 16px 0;
}

.days {
  font-size: 24px;
  color: #333;
  font-weight: bold;
}

.progress-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 40px;
}

.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ccc;
}

.dot.active {
  background-color: green;
}

.sign-button-container {
  text-align: center;
  margin-bottom: 10px;
}

.sign-button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 16px;
  background-color: #2196F3;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.extra-info {
  text-align: center;
  margin: 10px 0;
  font-size: 14px;
  color: #666;
}

.task-list {
  margin-top: 20px;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.task-name {
  flex: 2;
}

.task-points {
  flex: 1;
  text-align: center;
  color: green;
}

.task-button {
  flex: 1;
  text-align: center;
  padding: 6px 12px;
  background-color: #eee;
  color: #333;
  border: none;
}
</style>
